![\"img\"](\"https://i.imgur.com/cNfpEph.png\")
\n\n프론트 엔드 면접 질문용 공부 후 정리 자료입니다. 정확하지 않을 수 있으니 꼭 다시 책이나 자료를 참고하여 공부하세요
\n
react-redux 규칙
\nreduce 만드는 순서
\nmapDispatchToProps(액션 생성 함수를 컴포넌트의 Props로 넘겨주기 위해 사용하는 함수)
\n이 2가지를 다음과 같이 사용
\nconnect(mapStateToProps, mapDispatchToProps)(타깃컴포넌트)자세한 리덕스 내용은 아래를 참고
\nContext-API? :
\nfunction BlackDog() {\n this.name = '흰둥이';\n return {\n name: '검둥이',\n bark: function() {\n console.log(this.name + ': 멍멍!');\n }\n }\n}\n\nconst blackDog = new Blackdog();\nblackDog.bark(); // 검둥이: 멍멍!\n\nfunction WhiteDog() {\n this.name = '흰둥이';\n return {\n name: '검둥이',\n bark: () => {\n console.log(this.name + ': 멍멍!');\n }\n }\n}\n\nconst whiteDog = new Whitedog();\nwhiteDog.bark(); // 흰둥이: 멍멍!일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킴
\n
import React, { useState } from 'react';\n\n\nfunction Example() {\n // 새로운 state 변수를 선언하고, count라 부르겠습니다.\n // count의 초깃값은 0으로 지정합니다.\n const [count, setCount] = useState(0);\n\n\n return (\n <div>\n <p>You clicked {count} times</p>\n <button onClick={() => setCount(count + 1)}>\n Click me\n </button>\n </div>\n );\n}import React, { useState } from \"react\";\nimport \"./styles.css\";\n\n\nexport default function App() {\n const [state, setState] = useState({\n name: \"John\",\n id: 0\n });\n \n return (\n <div className=\"App\">\n <h1>Hello CodeSandbox</h1>\n <h2>Start editing to see some magic happen!</h2>\n <h3>name: {state.name} </h3>\n <h3>id: {state.id} </h3>\n <button onClick={() => setState({ ...state, id: state.id + 1 })}>\n Increase\n </button>\n </div>\n );\n}import React, { useState, useEffect } from 'react';\n\nfunction Example() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n document.title = `You clicked ${count} times`;\n });\n return (\n <div>\n <p>You clicked {count} times</p>\n <button onClick={() => setCount(count + 1)}>\n Click me\n </button>\n </div>\n );\n}// 첫 렌더링 때만 useEffect 실행\nuseEffect(() => {\n console.log('마운트 될 때만 실행');\n}, []);\n// 특정 값(name)이 바뀔 때만 useEffect 실행\nuseEffect(() => {\n console.log(`${name}이 바뀔 때만 실행`);\n}, [name]);import React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null);\n useEffect(() => {\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n return function cleanup() {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n });\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}const [state, dispatch] = useReducer(reducer, initialArg, init);const initialState = {count: 0};\n\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n default:\n throw new Error();\n }\n}\n\n\nfunction Counter() {\n const [state, dispatch] = useReducer(reducer, initialState);\n return (\n <>\n Count: {state.count}\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);const memoizedCallback = useCallback(\n () => {\n doSomething(a, b);\n },\n [a, b],\n);const refContainer = useRef(initialValue);function TextInputWithFocusButton() {\n const inputEl = useRef(null);\n const onButtonClick = () => {\n inputEl.current.focus();\n };\n return (\n <>\n <input ref={inputEl} type=\"text\" />\n <button onClick={onButtonClick}>Focus the input</button>\n </>\n );\n}const value = useContext(MyContext);